<template>
  <div class="demo">
    <div>
      <h1>myForm</h1>
      <my-form :data="data" :form="form" :rules="rules"></my-form>
    </div>
    <div>
      <h1>myForm isVirtaulList=true</h1>
      <my-form
        :data="data2"
        :form="form2"
        :rules="rules2"
        :isVirtaulList="true"
        :virtualListRemain="3"
      ></my-form>
    </div>

    <div>
      <h1>TreeGrid</h1>
      <tree-grid
        :columns="tableHeader"
        :dataSource="tableData"
        :info="tableInfo"
        :loading="loading"
      ></tree-grid>
    </div>
  </div>
</template>

<script>

import myForm from '@/components/form/myForm'
import TreeGrid from '@/components/TreeGrid'

export default {
  name: 'demo',
  components: {myForm, TreeGrid},
  data () {
    return {
      data: [
        {model: 'name', label: '姓名', type: 'input'},
        {model: 'height', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
        {model: 'sex', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]}
      ],
      data2: [
        {model: 'name', label: '姓名', type: 'input'},
        {model: 'height', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
        {model: 'sex', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]},
        [
          {model: 'name1', label: '姓名', type: 'input', vHeight: 150},
          {model: 'height1', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
          {model: 'sex1', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]}
        ],
        [
          {model: 'name2', label: '姓名', type: 'input', span: 12, vHeight: 100},
          {model: 'height2', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1, span: 6},
          {model: 'sex2', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}], span: 24 }
        ],
        [
          {model: 'name3', label: '姓名', type: 'input', span: 24, vHeight: 100},
          {model: 'height3', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1, span: 12},
          {model: 'sex3', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}], span: 12 }
        ],
        [
          {model: 'name4', label: '姓名', type: 'input', span: 24, vHeight: 150},
          {model: 'height4', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1, span: 12},
          {model: 'sex4', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}] }
        ],
        [
          {model: 'name5', label: '姓名', type: 'input', span: 24, vHeight: 150},
          {model: 'height5', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1, span: 24},
          {model: 'sex5', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}], span: 24 }
        ]
      ],
      form: {name: '', sex: 0, height: ''},
      rules: {},
      form2: {name: '', sex: 0, height: ''},
      rules2: {},
      loading: false,
      tableHeader: [
        {titleName: '111', fieldName: 'a'},
        {titleName: '222', fieldName: 'b'},
        {titleName: '333', fieldName: 'c'}
      ],
      tableData: [
        {a: 1, b: 31, c: 4},
        {a: 53, b: 31, c: 4},
        {a: 23, b: 32, c: 4}
      ],
      tableInfo: {pageNum: 1, pageSize: 10, total: 3}
    }
  },
  computed: {},
  created () {
  },
  methods: {}
}

</script>

<style lang="scss">
.demo {
  .myForm {
    width: 600px;
  }
}
</style>
